<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- designer-manual.qdoc -->
  <title>了解 Qt Designer | Qt Designer 手册</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.14</a></td><td ><a href="qtdesigner-manual.html">Qt Designer 手册</a></td><td >了解 Qt Designer</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtdesigner-manual.html">Qt 5.14.2 参考文档</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#launching-designer">启动 Designer</a></li>
<li class="level1"><a href="#the-user-interface">用户界面</a></li>
<li class="level1"><a href="#the-concept-of-layouts-in-qt">Qt中布局的概念</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">了解 Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-to-know.html-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/designer-screenshot.png" alt="" /></p><a name="launching-designer"></a>
<h2 id="launching-designer">启动 Designer</h2>
<p>安装了Qt之后，可以像开发主机上的任何其他应用程序一样启动 <i>Qt Designer</i> 。您还可以直接从 Qt Creator 启动 <i>Qt Designer</i> 。在 <b>设计</b> 模式下，Qt Creator自动打开集成 <i>Qt Designer</i> 中的所有.ui文件 。</p>
<p>通常，集成 <i>Qt Designer</i> 包含与独立 <i>Qt Designer</i> 相同的功能。有关这些差异的更多信息，请参见 <a href="../qtcreator/index.html">Qt Creator 手册</a> 。</p>
<p>如果有不适合Qt Creator <b>设计</b> 模式的大型窗体，则可以在独立的 <i>Qt Designer</i> 中打开它们 。</p>
<a name="the-user-interface"></a>
<h2 id="the-user-interface">用户界面</h2>
<p>作为独立应用程序使用时，<i>Qt Designer</i> 的用户界面可以配置为提供多窗口用户界面(默认模式)，也可以在停靠窗口模式下使用。当从集成开发环境(IDE)中使用时，只有多窗口用户界面可用。您可以在 <b>设置</b> 菜单中的 <b>属性...</b> 对话框的用户界面模式中切换模式 。</p>
<p>在多窗口模式下，您可以安排每个工具窗口来适应您的工作风格。主窗口由菜单栏、工具栏和小部件框组成，小部件框中包含用于创建用户界面的小部件。</p>
<a name="mainwindow"></a><div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/designer-main-window.png" alt="" /></td><td ><b>Qt Designer 的主窗体</b><p>菜单栏提供了管理窗体、使用剪贴板和访问特定于应用程序的帮助的所有标准操作。当前的编辑模式、工具窗口和使用中的窗体也可以通过菜单栏访问。</p>
<p>工具栏显示编辑窗体时使用的常见操作。这些也可以通过主菜单获得。</p>
<p>widget box 提供用于设计组件的通用小部件和布局。根据它们的用途或特性将它们分组。</p>
</td></tr>
</table></div>
<p><i>Qt Designer</i> 的大多数特性都可以通过菜单栏、工具栏或 widget box 访问。一些特性也可以通过上下文菜单在窗体窗口中打开。在大多数平台上，鼠标右键用于打开上下文菜单 。</p>
<a name="widgetbox"></a><div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/designer-widget-box.png" alt="" /></td><td ><b>Qt Designer 的 Widget Box</b><p>widget box 提供了可用于在窗体上创建用户界面的标准Qt小部件、布局和其他对象的选择。widget box 中的每个类别都包含具有类似用途或相关特性的小部件 。</p>
<p>您可以通过单击类别标签旁边的倒三角句柄来显示一个类别中的所有可用对象。当处于 <a href="designer-widget-mode.html">小部件编辑模式</a> 时，您可以通过将适当的项目从 widget box 拖放到窗体上，并将它们拖放到所需的位置，从而向窗体添加对象 。</p>
<p><i>Qt Designer</i> 提供了一个便笺本功能，允许您在一个单独的类别中收集经常使用的对象 。可以使用窗体中当前显示的任何小部件填充便笺本类，方法是将它们从窗体中拖出并拖放到 widget box 的空白处中，将自动新建一个便签类 。这些小部件可以像其他小部件一样使用，但是它们也可以包含子小部件。在小部件上打开上下文菜单以更改其名称或将其从便笺本中删除 。</p>
</td></tr>
</table></div>
<a name="the-concept-of-layouts-in-qt"></a>
<h2 id="the-concept-of-layouts-in-qt">Qt中布局的概念</h2>
<p>布局用于安排和管理组成用户界面的元素。Qt提供了许多类来自动处理布局—— <a href="../qtwidgets/qhboxlayout.html">QHBoxLayout</a>, <a href="../qtwidgets/qvboxlayout.html">QVBoxLayout</a>, <a  href="../qtwidgets/qgridlayout.html">QGridLayout</a>, 和 <a href="../qtwidgets/qformlayout.html">QFormLayout</a> 。这些类解决了自动布局小部件的难题，提供了行为可预测的用户界面。幸运的是，使用 <i>Qt Designer</i> 来安排小部件并不需要了解布局类。相反，从上下文菜单中选择一个 <b>水平布局</b> 、 <b>网格布局</b> 等选项 。</p>
<p>每个Qt小部件都有一个推荐的大小，称为 <a href="../qtwidgets/qwidget.html#sizeHint-prop">sizeHint()</a> 。布局管理器将尝试调整小部件的大小以满足其大小提示。在某些情况下，不需要使用不同的大小。例如， <a href="../qtwidgets/qlineedit.html">QLineEdit</a> 的高度总是一个固定值，这取决于字体大小和样式。在其他情况下，你可能需要改变大小，例如，一个 <a href="../qtwidgets/qlineedit.html">QLineEdit</a> 的宽度或项目视图小部件的宽度和高度。这就是小部件大小约束—— <a href="../qtwidgets/qwidget.html#minimumSize-prop">minimumSize</a> 和 <a  href="../qtwidgets/qwidget.html#maximumSize-prop">maximumSize</a> 约束发挥作用的地方。可以在属性编辑器中设置这些属性。例如，要覆盖默认的 <a href="../qtwidgets/qwidget.html#sizeHint-prop">sizeHint()</a> ，只需将 <a href="../qtwidgets/qwidget.html#minimumSize-prop">minimumSize</a> 和 <a  href="../qtwidgets/qwidget.html#maximumSize-prop">maximumSize</a> 设置为相同的值。或者，要使用当前大小作为大小约束值，请从小部件的上下文菜单中选择一个大小约束选项。然后，布局将确保满足这些约束。要通过代码控制小部件的大小，可以在代码中重新实现 <a href="../qtwidgets/qwidget.html#sizeHint-prop">sizeHint()</a> 。</p>
<p>下面的屏幕截图显示了使用网格设计的基本用户界面的分解。屏幕截图中的坐标显示了每个小部件在网格中的位置。</p>
<p class="centerAlign"><img src="images/addressbook-tutorial-part3-labeled-layout.png" alt="" /></p><p><b>注意: </b> 在网格内部， <a href="../qtwidgets/qpushbutton.html">QPushButton</a> 对象实际上是嵌套的。右边的按钮首先放在 <a href="../qtwidgets/qvboxlayout.html">QVBoxLayout</a> 中;底部的按钮首先放在 <a href="../qtwidgets/qhboxlayout.html">QHBoxLayout</a> 中。最后，将它们放入 <a href="../qtwidgets/qgridlayout.html">QGridLayout</a> 的坐标(1,2)和(2,1)中。</p><p>为了可视化，可以将布局想象成一个尽可能缩小的盒子，试图将小部件以整齐的排列方式 <i>挤压</i> ，同时最大化利用可用空间 。</p>
<p>Qt的布局可以帮助你:</p>
<ol class="1" type="1"><li>调整用户面大小以适应不同的窗口大小。</li>
<li>调整用户界面内元素的大小以适应不同的本地化。</li>
<li>根据不同平台的布局指导原则来安排元素。</li>
</ol>
<p>因此，您不再需要担心为不同的平台、设置和语言重新安排小部件。</p>
<p>下面的示例展示了不同的本地化如何影响用户界面 。当本地化需要更大的空间来容纳更长的文本字符串时，Qt布局会自动缩放以适应这种情况，同时确保用户界面看起来美观并且仍然符合平台指南。</p>
<div class="table"><table class="generic">
 <thead><tr class="qt-style"><th >A Dialog in English</th><th >A Dialog in French</th></tr></thead>
<tr valign="top" class="odd"><td ><p class="centerAlign"><img src="images/designer-english-dialog.png" alt="" /></p></td><td ><p class="centerAlign"><img src="images/designer-french-dialog.png" alt="" /></p></td></tr>
</table></div>
<p>布局小部件的过程包括创建布局层次结构，同时设置尽可能少的小部件大小约束 。</p>
<p>要了解更多关于Qt布局类的技术，请参阅 <a href="../qtwidgets/layout.html">布局管理</a> 文档 。</p>
</div>
<!-- @@@designer-to-know.html -->
<p class="naviNextPrevious footerNavi">
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2020 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
